<template>
  <el-dialog
    top="30px"
    width="1100px"
    :title="title"
    :visible.sync="visible"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-form @submit.native.prevent class="query-table-form" :inline="true">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="客户名称"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table
      border
      v-loading="loading"
      ref="table"
      class="table-sm"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="viewVisible"
      :close-on-click-modal="false"
      append-to-body
      top="40px"
      width="1000px"
      title="查看"
      class="dialog-sm"
    >
      <pdf-view down-name="签章" :contract-id="viewDocId" view-mode></pdf-view>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import PdfView from '@/credit/views/county/unionProvince/components/PdfView'

const enumSignStatus = {
  0: '未发送',
  1: '待签章',
  2: '已签章',
  3: '已作废',
}
const enumSignType = {
  1: '二八常规电子保函',
  2: '二八快捷电子保函',
  3: '限率存量确认函',
  4: '限率增量确认函',
  5: '放款通知',
}

export default {
  components: {
    PdfView,
  },
  props: {
    visible: Boolean,
    title: {
      type: String,
      default: '签章管理',
    },
    signType: {
      type: [Number, Array],
    },
  },
  data() {
    return {
      params: {
        index: 1,
        size: 15,
        'bank_id.eq': '',
        'sign_status.in': '1,2,3',
      },
      order: {
        end_sign_time: 'desc',
      },
      loading: false,
      totalCount: 0,
      tableData: [],
      tableColumns: [
        { attrs: { label: '客户名称', prop: 'customer_name' } },
        { attrs: { label: '签章类型', prop: 'signTypeLaben' } },
        { attrs: { label: '签章日期', prop: 'end_sign_time' } },
        { attrs: { label: '签章状态', prop: 'signStatusLabel' } },
        {
          attrs: { label: '操作', align: 'center', width: 100, fixed: 'right' },
          operations: [{ content: '查看', icon: 'fa fa-search', event: this.handleView }],
        },
      ],

      viewVisible: false,
      viewDocId: '',
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {
    signType: {
      handler: function (val) {
        if (val) {
          this.initParams()
          this.getData()
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    initParams() {
      this.params['bank_id.eq'] = this.clientId
      this.params['sign_type.eq'] = ''
      this.params['sign_type.in'] = ''
      if (typeof this.signType === 'number') {
        this.params['sign_type.eq'] = this.signType
      } else if (Array.isArray(this.signType)) {
        this.params['sign_type.in'] = this.signType.join(',')
      }
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getData() {
      this.loading = true
      this.$api
        .getData({
          table: 'sign_list_view_bank',
          params: this.params,
          order: this.order,
        })
        .then(res => {
          this.tableData = (res?.data?.data ?? []).map(this.dataAdapter)
          this.totalCount = res?.data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      item.signStatusLabel = enumSignStatus[item.sign_status] || '-'
      item.signTypeLaben = enumSignType[item.sign_type] || '-'
      return item
    },
    handleView(row = {}) {
      this.viewDocId = row.doc_id
      this.viewVisible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
